<template>
  <div class="word-editor">
    <div class="module file-upload">
      <input class="file-text" type="file" @change="uploadFile">
    </div>
    <div class="text-content-info">设置页边距</div>
    <div class="modal-wrapper">
      <button class="button_page" @mouseenter="toggleModal(true)" @mouseleave="toggleModal(false)"
        @click="isModalVisiblepage = true">页脚</button>
      <div v-show="isModalVisiblepage" class="page-model" @mouseenter="toggleModal(true)"
        @mouseleave="toggleModal(false)">
        <span class="page-close" @click="isModalVisiblepage = false">&times;</span>
        <div class="modal-content">
          <div>设置页脚信息</div>
          <div class="headerone">
            <div class="module header">
              <label class="font-text-info">偶数页文本:</label>
              <input type="text" v-model="footer_settings.evenFooterText" @focus="headerone('evenFooterText')" />
            </div>

            <div class="module header">
              <label class="font-text-info">奇数页文本:</label>
              <input type="text" v-model="footer_settings.oddFooterText" @focus="headerone('oddFooterText')" />
            </div>

            <div class="module header">
              <label class="font-text-info">偶数页字体名称:</label>
              <select v-model="footer_settings.evenFontName">
                <option v-for="name in textInfo" :key="name" :value="name">
                  {{ name }}
                </option>
              </select>
            </div>

            <div class="module header">
              <label class="font-text-info">奇数页字体名称:</label>
              <select v-model="footer_settings.oddFontName">
                <option v-for="name in textInfo" :key="name" :value="name">
                  {{ name }}
                </option>
              </select>
            </div>


            <div class="module footer-settings2">
              <label class="font-text-info">偶数页字体大小:
                <select v-model="selectedfooterFontSize2">
                  <option v-for="size in fontSizes" :key="size" :value="size">
                    {{ size }}
                  </option>
                </select>
              </label>
            </div>

            <div class="module footer-settings1">
              <label class="font-text-info">奇数页字体大小:
                <select v-model="selectedfooterFontSize1">
                  <option v-for="size in fontSizes" :key="size" :value="size">
                    {{ size }}
                  </option>
                </select>
              </label>
            </div>

            <div class="module header">
              <label class="font-text-info">偶数页对齐方式:</label>
              <div class="headerone">
                <label class="header-font-text-info">
                  <input type="radio" name="textAlign" value="wdAlignParagraphLeft" v-model="textAlign">
                  左对齐
                </label>
                <label class="header-font-text-info">
                  <input type="radio" name="textAlign" value="wdAlignParagraphCenter" v-model="textAlign">
                  居中
                </label>
                <label class="header-font-text-info">
                  <input type="radio" name="textAlign" value="wdAlignParagraphRight" v-model="textAlign">
                  右对齐
                </label>
              </div>
            </div>

            <div class="module header">
              <label class="font-text-info">奇数页对齐方式:</label>
              <div class="headerone">
                <label class="header-font-text-info">
                  <input type="radio" name="textAlignHeader" value="wdAlignParagraphLeft" v-model="textAlignHeader">
                  左对齐
                </label>
                <label class="header-font-text-info">
                  <input type="radio" name="textAlignHeader" value="wdAlignParagraphCenter" v-model="textAlignHeader">
                  居中
                </label>
                <label class="header-font-text-info">
                  <input type="radio" name="textAlignHeader" value="wdAlignParagraphRight" v-model="textAlignHeader">
                  右对齐
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
      <button class="button_page_header" @click="isModalVisiblepageheader = true">页眉</button>
      <div v-if="isModalVisiblepageheader" class="page-modal-header" @mousedown="startDrag" @mouseup="stopDrag"
        @mousemove="onDrag" ref="modal">
        <span class="page-close-header" @click="isModalVisiblepageheader = false">&times;</span>
        <div class="modal-content">
          <div class="yemei">设置页眉信息</div>
          <div class="module header">
            <label class="font-text-info">页眉文字:</label>
            <input type="text" v-model="footer_settings.evenFooterText" @focus="headerone('evenFooterText')" />
          </div>
          <div class="module header">
            <label class="font-text-info">字体名称:</label>
            <select v-model="footer_settings.evenFontName">
              <option v-for="name in textInfo" :key="name" :value="name">
                {{ name }}
              </option>
            </select>
          </div>
          <div id="headerAlignmentApp">
            <div class="headerone">
              <label class="header-font-text-info">
                <input type="radio" name="headerTextAlignment" value="wdAlignParagraphLeft" v-model="textAlignHeader">
                左对齐
              </label>
              <label class="header-font-text-info">
                <input type="radio" name="headerTextAlignment" value="wdAlignParagraphCenter" v-model="textAlignHeader">
                居中
              </label>
              <label class="header-font-text-info">
                <input type="radio" name="headerTextAlignment" value="wdAlignParagraphRight" v-model="textAlignHeader">
                右对齐
              </label>
            </div>
            <!-- 显示选择的对齐方式 -->
            <!-- <div>选中的对齐方式: {{ textAlignHeader }}</div> -->
          </div>
        </div>
      </div>
    </div>

    <div id="Margin_cm">
      <div class="container">
        <div class="margin-input">
          <label class="font-text-info">上边距:</label>
          <input type="number" v-model="margins.top" @focus="clearInput('top')" />
        </div>
        <div class="margin-input">
          <label class="font-text-info">右边距:</label>
          <input type="number" v-model="margins.right" @focus="clearInput('right')" />
        </div>
        <div class="margin-input">
          <label class="font-text-info">下边距:</label>
          <input type="number" v-model="margins.bottom" @focus="clearInput('bottom')" />
        </div>
        <div class="margin-input">
          <label class="font-text-info">左边距:</label>
          <input type="number" v-model="margins.left" @focus="clearInput('left')" />
        </div>
      </div>
    </div>

    <div class="text-content-info">修改标题信息</div>
    <div class="module headeronetextContent">
      <!-- 第一个部分的设置 -->
      <label class="headerone-content-info">标题一:
        <select v-model="headerOneData.content">
          <option v-for="size in headeroneInfo" :key="size" :value="size">
            {{ size }}
          </option>
        </select>
      </label>
      <div>
        <button @click="isModalVisible = true">打开方框</button>
        <div v-if="isModalVisible" class="modal">
          <div class="modal-content">
            <span class="close" @click="isModalVisible = false">&times;</span>
            <p>这里可以设置方框信息</p>
            <!-- 第一个部分的内容 -->
            <div v-for="setting in settings" :key="setting.key" class="module">
              <label>{{ setting.label }}:</label>

              <!-- 对于字体名称，使用下拉列表 -->
              <select v-if="setting.key === 'FontName'" v-model="setting.value">
                <option v-for="name in textInfo" :key="name" :value="name">
                  {{ name }}
                </option>
              </select>

              <!-- 对于字体大小，使用下拉列表 -->
              <select v-else-if="setting.key === 'FontSize'" v-model="setting.value">
                <option v-for="size in fontSizes" :key="size" :value="size">
                  {{ size }}
                </option>
              </select>

              <!-- 对于对齐方式，使用单选按钮 -->
              <div v-else-if="setting.key === 'Alignment'" class="alignment-options">
                <label>
                  <input type="radio" :name="setting.key" value="wdAlignParagraphLeft" v-model="setting.value">
                  左对齐
                </label>
                <label>
                  <input type="radio" :name="setting.key" value="wdAlignParagraphCenter" v-model="setting.value">
                  居中
                </label>
                <label>
                  <input type="radio" :name="setting.key" value="wdAlignParagraphRight" v-model="setting.value">
                  右对齐
                </label>
              </div>
              <!-- 对于其他设置类型，使用文本输入框 -->
              <input v-else type="text" v-model="setting.value" />
            </div>
          </div>
        </div>
      </div>
      <div>
        <button @click="isModalVisible3text = true">设置正文</button>
        <div v-if="isModalVisible3text" class="modal">
          <div class="modal-content">
            <span class="close" @click="isModalVisible3text = false">&times;</span>
            <p>这里可以设置方框信息</p>
            <!-- 第三个部分的内容 -->
            <div class="module textContent">
              <label class="text-content-info">文字内容:
                <select v-model="textContent">
                  <option v-for="size in textInfo" :key="size" :value="size">
                    {{ size }}
                  </option>
                </select>
              </label>
            </div>
            <div class="module font-settings">
              <label class="font-text-info">字体大小:
                <select v-model="selectedFontSize">
                  <option v-for="size in fontSizes" :key="size" :value="size">
                    {{ size }}
                  </option>
                </select>
              </label>
            </div>
            <div class="Page-Distance"> 选择边距
              <select v-model="selectedLineSpacing" class="Page-Distance">
                <option v-for="name in chineseLineSpacings" :key="name" :value="name">
                  {{ name }}
                </option>
              </select>
              <!-- <p> {{ selectedVbaCode }}</p> -->
            </div>
            <div class="module Line-spacing">
              <label class="font-text-info">行距:</label>
              <input type="number" v-model="lineSpacing" @focus="clearInput2('lineSpacing')" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="module headertwotextContent">
      <!-- 第一个部分的设置 -->
      <label class="headertwo-content-info">标题二:
        <select v-model="headerTwoData.content">
          <option v-for="size in headeroneInfo" :key="size" :value="size">
            {{ size }}
          </option>
        </select>
      </label>
      <div>
        <button @click="isModalVisible2 = true">打开方框</button>
        <button @click="copyHeaderTwoToThree">不想填了？直接copy</button>
        <div v-if="isModalVisible2" class="modal">
          <div class="modal-content">
            <span class="close" @click="isModalVisible2 = false">&times;</span>
            <p>这里可以设置方框信息</p>
            <!-- 第二个部分的内容 -->
            <div v-for="setting in settings2" :key="setting.uniqueKey" class="module">
              <label>{{ setting.label }}:</label>

              <!-- 对于字体名称，使用下拉列表 -->
              <select v-if="setting.key === 'FontName'" v-model="setting.value">
                <option v-for="name in textInfo" :key="name" :value="name">
                  {{ name }}
                </option>
              </select>

              <!-- 对于字体大小，使用下拉列表 -->
              <select v-else-if="setting.key === 'FontSize'" v-model="setting.value">
                <option v-for="size in fontSizes" :key="size" :value="size">
                  {{ size }}
                </option>
              </select>

              <!-- 对于对齐方式，使用单选按钮 -->
              <div v-else-if="setting.key === 'Alignment'" class="alignment-options">
                <!-- 单选按钮逻辑 -->
              </div>

              <!-- 对于其他设置类型，使用文本输入框 -->
              <input v-else type="text" v-model="setting.value" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="module headerthreetextContent">
      <!-- 第三个部分的设置 -->
      <label class="headerthree-content-info">标题三:
        <select v-model="headerThreeData.content">
          <option v-for="size in headeroneInfo" :key="size" :value="size">
            {{ size }}
          </option>
        </select>
      </label>
      <div>
        <button @click="isModalVisible3 = true">打开方框</button>
        <div v-if="isModalVisible3" class="modal">
          <div class="modal-content">
            <span class="close" @click="isModalVisible3 = false">&times;</span>
            <p>这里可以设置方框信息</p>
            <!-- 第三个部分的内容 -->
            <div v-for="setting in settings3" :key="setting.uniqueKey" class="module">
              <label>{{ setting.label }}:</label>

              <!-- 对于字体名称，使用下拉列表 -->
              <select v-if="setting.key === 'FontName'" v-model="setting.value">
                <option v-for="name in textInfo" :key="name" :value="name">
                  {{ name }}
                </option>
              </select>

              <!-- 对于字体大小，使用下拉列表 -->
              <select v-else-if="setting.key === 'FontSize'" v-model="setting.value">
                <option v-for="size in fontSizes" :key="size" :value="size">
                  {{ size }}
                </option>
              </select>

              <!-- 对于对齐方式，使用单选按钮 -->
              <div v-else-if="setting.key === 'Alignment'" class="alignment-options">
                <!-- 单选按钮逻辑 -->
              </div>

              <!-- 对于其他设置类型，使用文本输入框 -->
              <input v-else type="text" v-model="setting.value" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <!-- 点击按钮触发弹窗 -->
      <button class="ys_button" @click="showConfirmDialog">应用文字格式和行距</button>
      <!-- 弹窗内容 -->
      <div v-if="showConfirm" class="modal">
        <div class="modal-content">
          <h2>存储数据</h2>
          <p>是否要存储此次数据？</p>
          <button @click="showInputBox">确定</button>
          <button @click="cancelConfirm">取消</button>
          <span class="showConfirmDialogclone" @click="showConfirm = false">&times;</span>
        </div>
      </div>
      <div v-if="showInput" class="modal">
        <div class="modal-content">
          <h2>请输入名称</h2>
          <input v-model="inputName" @keydown.enter="confirmInput" />
          <button @click="confirmInput">确定</button>
          <button @click="cancelInput">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import '../assets/wordText.css'

export default {
  name: 'WordEditor',
  data() {
    return {
      // textAlignHeader: 'wdAlignParagraphLeft',
      headerTextAlignment: 'wdAlignParagraphLeft',
      isDragging: false,
      startX: 0,
      startY: 0,
      isModalVisiblepageheader: false,
      modalTimeout: null,
      chineseLineSpacings: ["单倍行距", "1.5倍行距", "双倍行距", "多倍行距", "固定行距", "最小行距"],
      selectedLineSpacing: "",// 初始选择为空
      isModalVisiblepage: false,
      isModalVisible3text: false,
      showConfirm: false, // 控制确认对话框显示/隐藏
      showInput: false, // 控制输入框显示/隐藏
      inputName: "",
      chineseToVbaMapping: {
        "单倍行距": "WD_LINE_SPACING.SINGLE",
        "1.5倍行距": "WD_LINE_SPACING.ONE_POINT_FIVE",
        "双倍行距": "WD_LINE_SPACING.DOUBLE",
        "多倍行距": "WD_LINE_SPACING.MULTIPLE",
        "固定行距": "WD_LINE_SPACING.EXACTLY",
        "最小行距": "WD_LINE_SPACING.AT_LEAST"
      },
      lineSpacing: 0,
      margins: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
      },
      headerOneData: {
        content: '',
        font: '宋体',
        fontSize: 'One',
        textAlign: 'wdAlignParagraphLeft',
      },
      headerTwoData: {
        content: '',
        font: '宋体',
        fontSize: 'One',
        textAlign: 'wdAlignParagraphLeft',
      },
      headerThreeData: {
        content: '',
        font: '宋体',
        fontSize: 'One',
        textAlign: 'wdAlignParagraphLeft',
      },
      footer_settings: {
        evenFooterText: "",
        oddFooterText: "",
        evenFontName: "",
        oddFontName: "",
        evenFontSize: null,
        oddFontSize: null,
        evenAlignment: 'wdAlignParagraphLeft',  // 默认值可以是 'left', 'center', 或 'right'
        oddAlignment: 'wdAlignParagraphLeft',
      },
      settings: [
        { key: "FontName", label: "字体名称", value: "" },
        { key: "FontSize", label: "字体大小", value: "" },
        { key: "Alignment", label: "对齐方式", value: "" },
        { key: "SpaceBefore", label: "段前间距", value: "" },
        { key: "SpaceAfter", label: "段后间距", value: "" },
        { key: "LineSpacingRule", label: "行距规则", value: "wdLineSpaceMultiple" },
      ],
      settings2: [],
      settings3: [],
      headeronefont: '宋体',
      headeroneFontSize: 'One',
      selectedfooterFontSize1: '',
      selectedfooterFontSize2: '',
      headertwofont: '宋体',
      headertwoFontSize: 'One',
      headerthreefont: '宋体',
      headerthreeFontSize: 'One',
      textAlign: 'wdAlignParagraphLeft',
      textAlignHeaderOne: 'wdAlignParagraphLeft',
      textAlign1: 'wdAlignParagraphLeft',
      textAlignHeaderThree: 'wdAlignParagraphLeft',
      isModalVisible2: false,
      isModalVisible: false,
      isModalVisible3: false,
      headeroneContent: '',
      headerthreeContent: '',
      // Line-spacing: 0,
      textContent: '宋体', // 文本内容
      selectedFontSize: 'One', // 默认选中的字体大小
      textInfo: ['宋体', '黑体', '仿宋'],
      // const chineseToVbaMapping = {
      //   "单倍行距": "WD_LINE_SPACING.SINGLE",
      //   "1.5倍行距": "WD_LINE_SPACING.ONE_POINT_FIVE",
      //   "双倍行距": "WD_LINE_SPACING.DOUBLE",
      //   "多倍行距": "WD_LINE_SPACING.MULTIPLE",
      //   "固定行距": "WD_LINE_SPACING.EXACTLY",
      //   "最小行距": "WD_LINE_SPACING.AT_LEAST"
      // ;
      // # 单倍行距（Single line spacing）: WD_LINE_SPACING.SINGLE
      // # 1.5倍行距（One and a half line spacing）: WD_LINE_SPACING.ONE_POINT_FIVE
      // # 双倍行距（Double line spacing）: WD_LINE_SPACING.DOUBLE
      // # 多倍行距（Multiple line spacing）: WD_LINE_SPACING.MULTIPLE
      // # 固定行距（Exactly fixed line spacing）: WD_LINE_SPACING.EXACTLY
      // # 最小行距（At least line spacing）: WD_LINE_SPACING.AT_LEAST
      headeroneInfo: ['一、二、三、四、...', '(一)、(二)、(三)、(四)、...', '1、2、3、4、...', '第一章、第二章、第三章、', 'No need'],
      fontSizes: [ // 字体大小数组（英文）
        'One', 'SmallOne', 'Two', 'SmallTwo', 'Three', 'SmallThree',
        'Four', 'SmallFour', 'Five', 'SmallFive', 'Six', 'SmallSix',
        'Seven', 'Eight'
      ],
      fontSizeValues: { // 字体大小对应的数值
        'One': 26, 'SmallOne': 24, 'Two': 22, 'SmallTwo': 18,
        'Three': 16, 'SmallThree': 15, 'Four': 14, 'SmallFour': 12,
        'Five': 10.5, 'SmallFive': 9, 'Six': 7.5, 'SmallSix': 6.5,
        'Seven': 5.5, 'Eight': 5
      }

      // ...其他数据...
    };
  },
  created() {
    this.settings2 = this.settings.map((setting, index) => ({ ...setting, uniqueKey: `settings2-${index}` }));
    this.settings3 = this.settings.map((setting, index) => ({ ...setting, uniqueKey: `settings3-${index}` }));
  },

  methods: {
    startDrag(e) {
      this.isDragging = true;
      this.startX = e.clientX - this.$refs.modal.offsetLeft;
      this.startY = e.clientY - this.$refs.modal.offsetTop;
    },
    onDrag(e) {
      if (this.isDragging) {
        this.$refs.modal.style.left = (e.clientX - this.startX) + 'px';
        this.$refs.modal.style.top = (e.clientY - this.startY) + 'px';
      }
    },
    stopDrag() {
      this.isDragging = false;
    },
    toggleModal(show) {
      this.isModalVisiblepage = show;
      const modal = this.$el.querySelector('.page-model');
      if (show) {
        modal.classList.add('visible');
      } else {
        modal.classList.remove('visible');
      }
    },
    showModal() {
      // 清除之前的延时器
      if (this.modalTimeout) {
        clearTimeout(this.modalTimeout);
      }
      // 设置新的延时器
      this.modalTimeout = setTimeout(() => {
        this.isModalActive = true;
      }, 300); // 300毫秒延时
    },
    hideModal() {
      if (this.modalTimeout) {
        clearTimeout(this.modalTimeout);
      }
      this.isModalActive = false;
    },
    handleSelection() {
      // 在这里可以获取selectedLineSpacing的值，然后将其转换为VBA宏代码字符串
      return this.chineseToVbaMapping[this.selectedLineSpacing] || "";
    },
    // toggleModal(isVisible) {
    //   this.isModalVisiblepage = isVisible;
    // },
    showConfirmDialog() {
      this.showConfirm = true; // 显示确认对话框
    },
    showInputBox() {
      this.showInput = true; // 显示输入框
      this.showConfirm = false; // 隐藏确认对话框
    },
    cancelConfirm() {
      this.showConfirm = false; // 取消确认
      const qx = null;
      this.applyFormatting(qx);
    },
    confirmInput() {
      // 获取用户输入的名称
      const name = this.inputName;

      // 在这里执行后续的方法，将名称传递给后端
      this.applyFormatting(name);

      // 隐藏输入框并重置输入
      this.showInput = false;
      this.inputName = "";
    },
    cancelInput() {
      // 用户取消输入，只隐藏输入框并重置输入
      this.showInput = false;
      this.inputName = "";
    },
    copyHeaderTwoToThree() {
      this.headerThreeData = { ...this.headerTwoData };
      this.settings3 = this.settings2.map((setting, index) => ({
        ...setting,
        uniqueKey: `settings3-${index}` // 生成新的 uniqueKey
      }));
    },
    // ...其他方法...
    clearInput(direction) {
      if (this.margins[direction] === 0) {
        this.margins[direction] = ''; // 清除对应方向的输入
      }
    },
    clearInput2(direction) {
      if (this[direction] === 0) {
        this[direction] = '';
      }
    },
    headerone(direction) {
      if (this[direction] === 0) {
        // return
      }
    },
    uploadFile(event) {
      const file = event.target.files[0];
      if (!file) {
        return;
      }
      this.selectedFile = file
      if (file.type !== "application/msword" &&
        file.type !== "application/vnd.openxmlformats-officedocument.wordprocessingml.document") {
        alert('仅接收.doc和.docx结尾的word文件，请重试');
        this.selectedFile = null; // 清除存储的文件对象
        return;
      }
      const formData = new FormData();
      formData.append('file', this.selectedFile);
      // 将时间戳转换为字符串
      var timestamp = new Date().getTime();
      this.word_id = String(timestamp);
      formData.append('word_id', this.word_id)
      this.$http.post('http://127.0.0.1:8001/upload/', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
        .then(response => {
          // alert('File uploaded successfully', response);
          console.log(response);
        })
        .catch(error => {
          alert('Upload failed', error);
        });
    },
    applyFormatting(name) {
      var status_info = 0
      if (name) {
        status_info = 1
      }
      const headerone = {
        content: this.headerOneData.content,
        settings: this.settings
      };
      const headertwo = {
        content: this.headerTwoData.content,
        settings: this.settings2
      };
      const headerthree = {
        content: this.headerThreeData.content,

        settings: this.settings3
      };
      const payload = {
        evenFooterText: this.footer_settings.evenFooterText,
        oddFooterText: this.footer_settings.oddFooterText,
        evenFontName: this.footer_settings.evenFontName,
        oddFontName: this.footer_settings.oddFontName,
        evenFontSize: this.selectedfooterFontSize2,
        oddFontSize: this.selectedfooterFontSize1,
        textAlign: this.textAlign,
      };
      if (!this.selectedFile) {
        alert('请放入文件')
        return
      }
      // ...应用格式的逻辑...
      if (this.margins.top > 0 && this.margins.bottom > 0 && this.margins.left > 0 && this.margins.right > 0 && this.word_id > 0) {
        const formData2 = new FormData();
        formData2.append('top_margin', this.margins.top);
        formData2.append('bottom_margin', this.margins.bottom);
        formData2.append('left_margin', this.margins.left);
        formData2.append('right_margin', this.margins.right);
        formData2.append('word_id', this.word_id);
        if (status_info) {
          formData2.append('status', status_info)
        }
        this.$http.post('http://127.0.0.1:8001/setmargin/', formData2, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
          .then(response => {
            // alert('数据发送成功', response);
            console.log(response);
            // 处理响应...
          })
          .catch(error => {
            console.error('发送数据时发生错误', error);
            // 处理错误...
          });
      }
      const formData3 = new FormData();
      if (!this.lineSpacing || !this.selectedLineSpacing) {
        alert('请输入行距')
        return
      }
      formData3.append('Line_spacing', this.lineSpacing)
      formData3.append('Font_name', this.textContent)
      formData3.append('Font_size', this.selectedFontSize)
      formData3.append('word_id', this.word_id)
      if (status_info) {
        formData3.append('status', status_info)
      }
      this.$http.post('http://127.0.0.1:8001/runwordmacro/', formData3, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
        .then(response => {
          alert('数据发送成功', response);
          console.log(response);
          // 处理响应...
        })
        .catch(error => {
          console.error('发送数据时发生错误', error);
          // 处理错误...
        });
      const formData4 = new FormData();
      const isEmpty = Object.values(payload).some(value => value === null || value === undefined);
      if (isEmpty) {
        formData4.append('payload', JSON.stringify(payload))
      }
      formData4.append('word_id', JSON.stringify(this.word_id))
      formData4.append('headerone', JSON.stringify(headerone))
      formData4.append('headertwo', JSON.stringify(headertwo))
      formData4.append('headerthree', JSON.stringify(headerthree)) //runview/
      if (status_info) {
        formData4.append('status', status_info)
      }
      this.$http.post('http://127.0.0.1:8001/runview/', formData4, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
        .then(response => {
          alert('数据发送成功', response);
          console.log(response);
          // 处理响应...
        })
        .catch(error => {
          console.error('发送数据时发生错误', error);
          // 处理错误...
        });
      const data = { file_id: this.word_id };
      setTimeout(() => this.fasong(data), 3000);
    },
    fasong(data) {
      this.$http.post('http://localhost:8001/download-word-file/', data, { responseType: 'blob' })
        .then(response => {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', 'file.doc'); // 或者根据响应动态设置文件名
          document.body.appendChild(link);
          link.click();
        })
        .catch(error => {
          console.error('下载时发生错误', error);
          // 处理错误...
        });
    }
  }
};
</script>
  
<style scoped></style>